<template>
    <div class="container">
        
        <el-card shadow="hover" style="padding:0">
            <!-- 表格 -->
            <el-table
                ref="table"
                size="small"
                empty-text="暂无数据"
                element-loading-text="给我一点时间"
                fit
                stripe
                border
                highlight-current-row
                default-expand-all
                v-loading="loading"
                row-key="id"
                :indent="30"
                :data="data"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                :header-cell-style="{'padding-top': '10px', 'height': '50px', 'color': '#515A6E', 'background-color': '#f8f8f9'}"
            >
                <el-table-column type="index" width="55" align="center"></el-table-column>

                <el-table-column label="名称" prop="name" align="left" width="250"/>

                <el-table-column label="权限" align="left">
                    <template slot-scope="scope" v-if="scope.row.permission">
                        
                        <el-checkbox-group v-model="permissionCheckList">
                            <el-checkbox v-for="item in scope.row.permission"
                                :label="`${scope.row.id}-${item.id}`" 
                                :key="`${scope.row.id}-${item.id}`">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>

                    </template>
                </el-table-column>
                

            </el-table>
        </el-card>
    </div>
</template>

<script>
import { listWithTreeOnPermission } from "@/api/admin/sysmenu"
import { getRolesPermitByUserRoleIds } from "@/api/admin/sysuser"
import { saveRolePermission, getPermissionByRoleId } from "@/api/admin/sysrole"
import { selectList, findPermissionByMenuId } from "@/api/admin/syspermission"
import { ResultMessage } from "@/libs/response"
import { mapMutations, mapGetters } from 'vuex'
export default {
    data() {
        return {
            loading: true,
            data: [],
            permissionCheckList: [],    // 选中的权限
        }
    },
    computed: {
        ...mapGetters(['roles'])
    },
    mounted() {
        this.getTreeGrid()
    },
    methods: {
        getTreeGrid() { // 加载菜单表格
            listWithTreeOnPermission().then(res => {
                if (ResultMessage(res, false)) {
                    this.data = res.data
                    this.loading = false
                } else {
                    this.loading = false
                }
            }).then(() => {
                let roleIds = []
                this.roles.forEach(v => {
                    roleIds.push(v.id)
                })
                if(roleIds.length > 0) {
                    getRolesPermitByUserRoleIds(roleIds).then(res => {
                        if(this.ResultMessage(res, false)) {
                            if(res.data && res.data.length > 0) {
                                res.data.forEach(v => {
                                    this.permissionCheckList.push(v.menuId+'-'+v.permissionId)
                                })
                            }
                        }
                    })
                }
            }).catch(error => {
                this.loading = false
                this.$notify({ title: '提示', message: error, type: 'info' });
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>